<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四级联动</title>
</head>
<body>
    <div id="citySelect">
        <select name="data[province]" id="province">
            <option value="0">请选择</option>
        </select>
        <select name="data[city]" id="city">
            <option value="0">请选择</option>
        </select>
        <select name="data[district]" id="district">
            <option value="0">请选择</option>
        </select>
        <select name="data[street]" id="street">
            <option value="0">请选择</option>
        </select>
        <!-- <select name="data[community]" id="community">
            <option value="0">请选择</option>
        </select> -->
    </div>

    <!-- <input type="color"> -->

<script src="http://cache.weikuw.com/tpl/static/lib/js/jquery-2.1.1.min.js"></script>
<script src="dish/multistageTandem.min.js"></script>
<!-- <script src="dish/multistageTandem.js"></script> -->
<!-- <script src="dish/weui_city.js"></script> -->
<script src="dish/level_street.js"></script>
<script>
    $('#citySelect').linkage({
		doms: ['#province', '#city', '#district', '#street'],
		list: level_street,
        labelKey: 'text',
        valueKey: 'text',
		// defaultValue: ['湖南省', '长沙市', '望城区', '铜官街道'],
		//defaultValue: ['湖南省', '长沙市'],
        /**
         * @param ele {jQueryDom} 没有子集的元素
         * @param res {Object}    循环信息
        */
        noneMore: function(ele, res){
            res.doms.show();
            //由于是后一次循环，更新前一次的数据，所以最后一次循环取消判断
            if(res.key < 3) ele.hide(); //3 => doms.length-1
        },
        /**
         * @param list    {Array}   当前操作子集列表
         * @param parent  {Array}   当前操作的数据信息
        */
        beforeCreate(list, parent){
            // console.log('parent:', parent, list);
            return [{ text: '全部', value: 0, children: []}, ...list];
        },
        updateBefore: function(res){
            // console.log('before', this, res);
        },
        updateAfter: function(res){
            // console.log('after:', this, res);
            var param = {
                province: $('#province').val(),
                city: $('#city').val(),
                district: $('#district').val(),
                street: $('#street').val()
            };
            // console.log('param:', param);
        }
    });
</script>
</body>
</html>